import React from 'react';
import { Table, Button, Space } from 'antd';
import { EyeOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { useState } from 'react';
import EditModal from "./EditModelitemSample";

// 自定义钩子
function useTableData() {
    const [data, setData] = useState([
        { key: '1', name: 'John Brown', id: '001', num:'12', details: 'Details 1' },
        { key: '2', name: 'Jim Green', id: '002', num:'12', details: 'Details 2' },
        { key: '3', name: 'Joe Black', id: '003', num:'12', details: 'Details 3' },
    ]);

    const handleDetails = (record: any) => {
        console.log('Details:', record);
    };

    const handleDelete = (key: string) => {
        setData(data.filter((item) => item.key !== key));
    };

    return { data, handleDetails, handleDelete };
}

const TableComponent: React.FC = () => {
    const { data, handleDetails, handleDelete } = useTableData();

    const columns = [
        {
            title: '序号',
            dataIndex: 'key',
            key: 'key',
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '数量',
            dataIndex: 'num',
            key: 'num',
        },
        {
            title: '详情',
            dataIndex: 'details',
            key: 'details',
            render: (text: string, record: any) => (
                <Button type="link" onClick={() => handleDetails(record)}>
                    <EyeOutlined /> 查看
                </Button>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (text: string, record: any) => (
                <Space size="middle">
                    <Button type="link" onClick={() => handleDetails(record)}>
                        <EditOutlined />
                        <EditModal />
                    </Button>
                    <Button type="link" onClick={() => handleDelete(record.key)}>
                        <DeleteOutlined /> 删除
                    </Button>
                </Space>
            ),
        },
    ];

    return <Table dataSource={data} columns={columns} pagination={false} />;
};

export default TableComponent;